<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>抱团</title>
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui,viewport-fit=cover" />
    <meta name="keywords" content="抱团">
    <meta name="description" content="抱团">
    <script type="text/javascript" src="js/base.js" charset="UTF-8"></script>
    <!-- <link rel="stylesheet" type="text/css" href="css/theme-chalk/index.css"> -->
    <!-- <link rel="stylesheet" type="text/css" href="css/swiper-bundle.min.css"> -->
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type='text/javascript' src="js/jquery.min.js" charset="UTF-8"></script>
    <!-- <script type='text/javascript' src="js/html2canvas.min.js" charset="UTF-8"></script> -->
    <script type="text/javascript" src="js/layer/layer.js" charset="UTF-8"></script>
    <script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
    <script type="text/javascript" src="js/axios.min.js" charset="UTF-8"></script>
    <!-- <script type='text/javascript' src="js/elementui.min.js" charset="UTF-8"></script> -->
    <!-- <script type='text/javascript' src="js/swiper-bundle.min.js" charset="UTF-8"></script> -->
    <script type='text/javascript' src="../common/js/helper.js" charset="UTF-8"></script>
</head>
<style>
    html,body,#app{height: 100%;overflow: hidden;position: relative;}
    .scrollbox{height: 100%;overflow: scroll;}
</style>
<body>
    <div class="page mysy" id="app" v-show="loaded==true">
        <div class="scrollbox">
            <!-- 用户信息 -->
            <div class="user">
                <img class="img" :src="user_info.avatar_url" alt="">
                <div class="name">{{user_info.nickname}} 的金库</div>
            </div>
            <!-- 收益信息 -->
            <div class="syBox">
                <div class="top">
                    <div class="text">我的总收益 : <span>{{shouyidata.total}}</span></div>
                    <a href="./myTx.html" class="myjk">
                        <div class="icon"></div>
                        <div>立即提现</div>
                    </a>
                </div>
                <div class="bottom">
                    <div class="item">
                        <div class="t">未提现</div>
                        <div class="b">{{shouyidata.un_settled}}</div>
                    </div>
                    <div class="item">
                        <div class="t">已提现</div>
                        <div class="b">{{shouyidata.settled}}</div>
                    </div>
                    <div class="item">
                        <div class="t">直卖收益</div>
                        <div class="b">{{shouyidata.sale_profit}}</div>
                    </div>
                    <div class="item">
                        <div class="t">团队收益</div>
                        <div class="b">{{shouyidata.team_profit}}</div>
                    </div>
                </div>
            </div>
            <!-- 收益详情 -->
            <div class="sylist pad">
                <div class="til">{{typetxt}}收益详情</div>
                <div class="list">
                    <div class="item" v-for="(item,index) in listdata" :key="index"  v-if="listdata.length>0" >
                        <img :src="item.product_image" alt="" class="l">
                        <div class="c">
                            <div class="des ovline2">{{item.product_title}}</div>
                            <div class="des_">{{item.created_at}}</div>
                        </div>
                        <div class="r">
                            <div class="pic">¥{{item.profit_amount}}</div>
                            <div class="des">{{item.type.description}}</div>
                        </div>
                    </div>
                    <div class="empty" v-if="listdata.length==0">
                        <div class="img"><img src="images/search-empty.png" alt=""></div>
                        <p>暂无收益</p>
                    </div>
                </div>
                <p v-if="loading==false" class="loading">加载中...</p>
                <p v-if="has_more==false && listdata.length>10" class="loading">没有更多了</p>
            </div>
        </div>
    </div>

</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                user_info:{},
                loaded:false,
                type:'',
                typetxt:'',
                shouyidata:'',
                listdata:'',
                page:1,
                limit:10,
                loading: true,
                has_more:true,
            }
        },
        mounted() {
            
            var that=this;
            that.type=getUrlParam("type");
            if(that.type=='today'){that.typetxt='今日'}
            if(that.type=='yesterday'){that.typetxt='昨日'}
            if(that.type=='week'){that.typetxt='本周'}
            if(that.type=='month'){that.typetxt='本月'}
            if(that.type=='all'){that.typetxt='全部'}
            var user_info=JSON.parse(getCookie("user_info"));
            if(!user_info){
                that.isLogin=false;
            }else{
                that.isLogin=true;
                that.user_info=user_info;
            }
            console.log(that.user_info)
            that.getdata();
            $('.scrollbox').get(0).addEventListener('scroll', function() {
                let ele = $('.scrollbox').get(0); // 获得html
                let scrollTop = ele.scrollTop; // 向上滚动的高度
                let scrollHeight = ele.scrollHeight; // 滚动内容区域总高度
                let clientHeight = ele.clientHeight; // 可见高度
                if (clientHeight + scrollTop >= scrollHeight) { // 已经滚动到底部
                    if(that.loading==true && that.has_more==true){
                        that.load ()
                    }
                }
            })
        },
        methods: {
            getdata:function(){
                var that=this;
                that.page=1;
                var ready1=false,ready2=false;
                var load=setInterval(()=>{
                    if(ready1==true && ready2==true){
                        that.loaded=true;
                        clearInterval(load)
                    }
                },100)
                //查询收益概况
                talent_get('profits/total_summary').then(res => {
                    console.log(res);
                    that.shouyidata=res;
                    ready1=true;
                })
                //查询收益列表
                talent_get('profits/'+that.type+'?page='+that.page+'&limit='+that.limit).then(res => {
                    that.has_more=res.has_more;
                    that.listdata=res.list;
                    ready2=true;
                    console.log(res);
                })
            },
            load () {
                var that=this;
                that.loading = false;
                that.page++;
                talent_get('profits/'+that.type+'?page='+that.page+'&limit='+that.limit).then(res => {
                    that.has_more=res.has_more;
                    if(res.list.length>0){
                        $(res.list).each((i,v)=>{
                            that.listdata.push(v);
                        })
                    }
                    that.loading = true;
                })
            },
        }
    });
</script>

</html>